<!--
 * @Author: chengjiang
 * @Date: 2024-11-05 11:43:00
 * @Description: 登录页面
-->

<template>
  <div class="login-container">
    <a-flex gap="large" vertical>
      <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="onFinish" @finishFailed="onFinishFailed">
        <img class="mb-10" src="/logo.png" alt="" width="250" />
        <h3 class="mb-10">管理员登录</h3>
        <a-form-item label="账号" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item label="密码" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-checkbox class="float-left mt-2" v-model:checked="formState.remember">记住我</a-checkbox>
        <a-button class="float-right" type="primary" html-type="submit" :loading="loading">登录</a-button>
      </a-form>
      <p class="mt-5 text-[#858688]">copyright &copy; 2024盘庚金技术小组</p>
      <a class="text-[#858688]" href="https://beian.miit.gov.cn">备案：粤ICP备2023131510号-1</a>
    </a-flex>

  </div>

</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { login, UserInfo } from '../api/home';
import { ref } from 'vue';
import { setToken } from '../utils/token';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
const router = useRouter();
const loading = ref<boolean>(false);

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true,
});
const onFinish = async (values: FormState) => {
  try {
    // 调用登录校验接口。
    const response = await login<UserInfo>({ account: values.username, password: values.password })
    // response.then((res)=>{
    //   console.log('response', res.data)
    //   const ret = res.data
    //   setToken(ret.token);
    // }).catch(()=>{
    //   console.log('error')
    // })
    if (response.data && response.data.token) {
      setToken(response.data.token);
      message.success('登录成功!')
      router.push({ name: 'Home' })
    } else {
      message.error('登录失败!')
    }
  } catch (errorInfo) {
    message.error('登录失败!')
    // setToken('ret.token');
    console.log('errorInfo', errorInfo)
    router.push({ name: 'Home' })
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

</script>



<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-image: url('/login_bg.jpg');
  background-size: cover;
  background-position: center;
}
</style>
